

<template>
  <div class="app-container">

    <div class="app-container__section" >
      <PlusSearch
          v-bind="getSearchBinds()"
          :columns="columns"
          v-model="searchForm"
      >

        <template #plus-field-createTime>
          <el-date-picker  start-placeholder="开始时间" end-placeholder="结束时间"  v-model="searchForm.timeRange" type="daterange"  />
        </template>

      </PlusSearch>
    </div>

    <div class="app-container__section">
      <PlusTable
          v-bind="getBinds()"
          :columns="columns"
      >
        <template #empty>
          <el-empty image-size="100" description="暂无数据"></el-empty>
        </template>
        <template #title>
          <table-title />
        </template>
        <template #toolbar>

          <el-button
              type="primary"
              plain
              icon="Plus"
              @click="handleAdd"
              v-hasPermi="['edutation:teacher:add']"
          >新增</el-button>
          <el-button
              type="success"
              plain
              icon="Edit"
              :disabled="gSelection.length !== 1"
              @click="handleUpdate(gSelection[0])"
              v-hasPermi="['edutation:teacher:edit']"
          >修改</el-button>
          <el-button
              type="danger"
              plain
              icon="Delete"
              :disabled="gSelection.length === 0"
              @click="handleDelete"
              v-hasPermi="['edutation:teacher:remove']"
          >删除</el-button>
          <el-button
              type="warning"
              plain
              icon="Download"
              @click="handleExport"
              v-hasPermi="['edutation:teacher:export']"
          >导出</el-button>

          <ClockTimer :task="gGetList" />
          <SearchAreaControl v-model="gShowSearchForm" />
        </template>


        <template #plus-cell-action="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"  v-hasPermi="['edutation:teacher:edit']">修改</el-button>
          <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['edutation:teacher:remove']">删除</el-button>
        </template>
      </PlusTable>
    </div>

    <add-form @update="gGetList" ref="addFormRef"  />
  </div>
</template>


<script setup name="Teacher">
import { listTeacherApi, getTeacherApi, delTeacherApi, } from "@/api/edutation/teacher";
import { useTablePage } from '@/hooks/useTablePage.js'
import { useActions } from '@/hooks/useActions.js'
import { getCurrentInstance,ref } from "vue"
import AddForm from './addForm.vue'
import {useCommonData} from "@/hooks/useCommonData.js";
const { proxy } = getCurrentInstance();
const primaryKey = "id"  // 主键

const { schoolDataList,getSchoolDataList } = useCommonData();
getSchoolDataList();
const { sys_user_sex ,edu_emergency_relation,edu_teacher_state,edu_teacher_level,edu_degree_data
} = proxy.useDict('edu_degree_data','edu_teacher_level','edu_teacher_state','sys_user_sex','edu_student_state','edu_emergency_relation');
// =============================================
// 列表请求逻辑

const searchForm = ref({})
const columns = computed(()=>[
  {
    label: '教师名称',
    prop: 'nickName',
    hideInSearch:false,
    valueType:'input',
    tableColumnProps: {
      align: 'center'
    },
    fieldProps:{
      maxlength: 200,
      modelModifiers: { trim: true },
    },
  },
  {
    label: '性别',
    prop: 'sex',
    hideInSearch:false,
    valueType:'select',
    options: sys_user_sex.value,
    tableColumnProps: {
      align: 'center'
    },
  },
  {
    label: '出生日期',
    prop: 'birthday',
    hideInSearch:true,
    hideIn:false,
    valueType:'input',
    tableColumnProps: {
      align: 'center'
    },
  },
  {
    label: '教师职称',
    prop: 'teacherLevel',
    hideInSearch:false,
    valueType:'select',
    options:edu_teacher_level.value,
    tableColumnProps: {
      align: 'center'
    },

  },
  {
    label: '最高学历',
    prop: 'degree',
    hideInSearch:false,
    valueType:'select',
    tableColumnProps: {
      align: 'center'
    },
    options:edu_degree_data.value,
    optionsMap:{},

  },
  {
    label: '归属学校',
    prop: 'schoolId',
    hideInSearch:false,
    valueType:'select',
    tableColumnProps: {
      align: 'center'
    },
    options:schoolDataList.value,
    optionsMap:{
      label: 'schoolName',
      value: 'schoolId'
    },
  },
  {
    label: '身份证号',
    prop: 'idCard',
    hideInSearch:false,
    valueType:'input',
    tableColumnProps: {
      align: 'center'
    },
    fieldProps:{
      maxlength: 200,
      modelModifiers: { trim: true },
    },
  },
  {
    label: '老师状态',
    prop: 'state',
    hideInSearch:false,
    valueType:'select',
    tableColumnProps: {
      align: 'center'
    },
    options:edu_teacher_state.value,
    optionsMap:{},

  },
  {
    label: '备注',
    prop: 'remark',
    hideInSearch:true,
    hideInTable: true,
    tableColumnProps: {
      align: 'center'
    },
  },
  {
  label: '教师编号',
  prop: 'teacherNumber',
  hideInSearch:false,
  tableColumnProps: {
    align: 'center'
  },
  fieldProps:{
    maxlength: 200,
    modelModifiers: { trim: true },
  },
},
  {
  label: '户籍地址',
  prop: 'cardAddress',
  hideInSearch:true,
  valueType:'textarea',
  tableColumnProps: {
    align: 'center'
  },
  fieldProps:{
    maxlength: 200,
    showWordLimit: true,
    modelModifiers: { trim: true },
    autosize: { minRows: 2, maxRows: 4 }
  },

},{
  label: '家庭地址',
  prop: 'houseAddress',
  hideInSearch:true,
  valueType:'textarea',
  tableColumnProps: {
    align: 'center'
  },
  fieldProps:{
    maxlength: 200,
    showWordLimit: true,
    modelModifiers: { trim: true },
    autosize: { minRows: 2, maxRows: 4 }
  },

},{
  label: '紧急联系',
  prop: 'emergency',
  hideInSearch:true,
  valueType:'textarea',
    hideInTable: true,
    tableColumnProps: {
    align: 'center'
  },
  fieldProps:{
    maxlength: 200,
    showWordLimit: true,
    modelModifiers: { trim: true },
    autosize: { minRows: 2, maxRows: 4 }
  },

},{
  label: '教育经历',
  prop: 'experience',
  hideInSearch:true,
  valueType:'input',
  hideInTable: true,
  tableColumnProps: {
    align: 'center'
  },
},
  {
    label: '操作',
    prop: 'action',
    minWidth: '120px',
    hideInSearch: true,
    hideInForm: true,
    tableColumnProps: {
      align: 'center',
      fixed: 'right'
    }
  }
])
const {
  gGetList,
  gSelection,
  gShowSearchForm,
  getBinds,
  getSearchBinds
} = useTablePage(listTeacherApi, {
  searchForm,
  beforeRequest(query){

    const { timeRange, ...rest } = query;
    const params = proxy.formatRangeTime(timeRange, undefined,'YYYY-MM-DD');
    return { ...rest, params }

  }
})

// 删除逻辑
const { deleteAction } = useActions();
function handleDelete(row) {
  deleteAction({
    api: delTeacherApi,
    uniqueKey:primaryKey,
    selection:row[primaryKey] || gSelection.value
  }).then(() => {
    gGetList();
  });
}

const addFormRef = ref(null)
// 新增操作
const handleAdd = ()=>{
  addFormRef.value.openDialog();
}
// 修改操作
const handleUpdate = (val)=>{
  addFormRef.value.openDialog(val);
}

// 导出逻辑
const  handleExport = () =>{
  proxy.download(
      'edutation/teacher/export',
      {...searchForm.value},
      `teacher_${new Date().getTime()}.xlsx`
  )
}
</script>


